@value default-blue from 'canvas-editor/styles/theme';
@value default-dark-gray from 'canvas-editor/styles/theme';
@value default-gray from 'canvas-editor/styles/theme';
@value default-light-gray from 'canvas-editor/styles/theme';

.canvas-block-wrapper {
  margin: 0 0 1.5rem;
  position: relative;

  &:last-child {
    margin-bottom: 0;
  }

  &.heading {
    margin: 2rem 0 0.5rem;
  }

  &.heading + &.heading {
    margin-top: 1rem;
  }

  &.unordered-list-item,
  &.checklist-item {
    margin: 0;
  }
}

.block-link {
  bottom: 0.0625rem;
  display: block;
  left: -1rem;
  opacity: 0;
  position: absolute;
  text-indent: -99999em;
  top: 0.0625rem;
  width: 1rem;
}

.block-link::before {
  background: var(--light-gray, default-light-gray);
  border-radius: 1000px;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  width: 3px;
}

.canvas-block-wrapper.is-leaf:hover .block-link,
.block-link:active,
.block-link:focus,
.is-focused .block-link,
[data-card-block-selected=true] .block-link {
  opacity: 1;
}

.block-link:active::before,
.block-link:focus::before,
.is-focused .block-link::before,
[data-card-block-selected=true] .block-link::before {
  background: var(--blue, default-blue);
}

.comment-thread-indicator {
  background: transparent;
  border-radius: 50%;
  border: none;
  display: block;
  height: 0.625rem;
  outline: none;
  padding: 0;
  position: absolute;
  right: -1.5rem;
  text-indent: -99999em;
  top: 0.4375rem;
  width: 0.625rem;
}

.canvas-block-wrapper.is-leaf:hover .comment-thread-indicator {
  background-color: var(--gray, default-gray);
}

.comment-thread-indicator.has-comments,
.canvas-block-wrapper.is-leaf:hover .comment-thread-indicator.has-comments {
  background-color: var(--dark-gray, default-dark-gray);
}

.comment-thread {
  margin-top: 1rem;
}
